<template>
  <div class="layout">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <!-- 错误原因: goods 一开始并没有数据为{},那么{}.categories  -> undefined -> undefined[1] 
            解决方式:
                1.可选链语法(表示有值才进行下一步) : ?.
                2.v-if手动控制渲染时机,保证有数据时才渲染
        -->
        <el-breadcrumb-item
          :to="{ path: `/category/${goods.categories?.[1].id}` }"
        >
          {{ goods.categories?.[1].name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: `/category/sub/${goods.categories?.[0].id}` }"
        >
          {{ goods.categories?.[0].name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/' }">{{
          goods?.name
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 商品信息 -->
    <GoodContent />
    <!-- 商品详情 -->
    <GoodInfo />

    

  </div>
</template>

<script setup>
import GoodContent from "./components/DetailsGoodContent.vue";
import GoodInfo from './components/DetailsGoodInfo.vue';
import { useGoodList } from "./composables/useGoodList";

const { goods } = useGoodList();
</script>

<style lang="scss" scoped>
.layout {
  .breadcrumb {
    margin: 10px 150px;
  }
}
</style>